<template>
    <el-card class="box-card">
        <el-divider content-position="left"><i class="el-icon-search"></i>查询条件</el-divider>
        <el-form :inline="true" :model="searchUserForm" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="searchUserForm.realName" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="seacherUser" icon="el-icon-search">查询</el-button>
                <el-button type="primary"  icon="el-icon-refresh-left">重置</el-button>
                <el-button type="primary"  icon="el-icon-plus">新增</el-button>
            </el-form-item>
        </el-form>
        <el-divider content-position="center"><i class="el-icon-search"></i></el-divider>
        <el-table
                :data="userList"
                border
                style="width: 100%">
            <el-table-column
                    prop="headUrl"
                    width="120"
                    label="头像">
                <template slot-scope="scope">
                     <img :src="scope.row.headUrl" width="80" height="80"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="账号"
                    >
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="昵称"
                    >
            </el-table-column>
            <el-table-column
                    prop="isDeleted"
                    label="状态"
            >
                <template slot-scope="scope">
                    <el-switch
                            style="display: block"
                            v-model="scope.row.isDeleted"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="0"
                            :inactive-value="1"
                            active-text="启用"
                            inactive-text="禁用"
                            @change="changeStatus(scope.row.id,scope.row.isDeleted)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="400"
            >
                <template slot-scope="scope">
                    <el-button type="danger" size="small">删除</el-button>
                    <el-button type="success" size="small">修改</el-button>
                    <el-button type="primary" size="small" @click="fenRole(scope.row.id)">分配角色</el-button>
                    <el-button type="success" size="small">修改密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 5, 20, 25]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--分配角色的对话框开始-->
        <el-dialog
                title="修改角色"
                :visible.sync="dialogVisible"
                width="30%"
            >
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.roleName}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmFenRole">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
        <!--分配角色的对话框结束-->
    </el-card>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                checkAll: false,
                checkedCities: [],
                cities: [],
                isIndeterminate: true,
                //============================
                searchUserForm:{},
                userList:[],
                currentPage: 1,
                pageSize: 2,
                total: 0,
                //分配角色对话框的显示和隐藏
                dialogVisible: false,
                userId:undefined,
            }
        },
        //vue生命周期中触发的函数---了解vue的生命周期
        created() {
            this.initUserTable();
        },
        methods:{
            handleCheckAllChange(val) {
                var checkedAll=this.cities.map(item=>item.id)
                this.checkedCities = val ? checkedAll : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            ////////////////////////////////////////////
            //确认分配角色
            confirmFenRole(){
                //userId  被选择的角色id  checkedCities
                this.$http.post("/system/role/confirm?userId="+this.userId+"&roleIds="+this.checkedCities).then(result=>{
                    this.$message.success("分配角色成功");
                    this.dialogVisible=false;
                })
            },

            //分配角色按钮事件
            fenRole(id){
                this.userId=id;
                this.dialogVisible=true;
                this.$http.get("/system/role/getByUserId/"+id).then(result=>{
                      this.cities=result.data.data.all;
                      this.checkedCities=result.data.data.roles;
                })

            },
            //修改状态
            changeStatus(id,value){
                this.$http.get("/system/user/status?id="+id+"&status="+value).then(result=>{
                      this.$message.success("状态修改成功")
                      this.initUserTable();
                })
            },
            //初始化用户表格
            initUserTable(){
               this.$http.post("/system/user/list/"+this.currentPage+"/"+this.pageSize,this.searchUserForm).then(result=>{
                     if(result.data.code==200){
                          this.userList=result.data.data.records;
                          this.total=result.data.data.total;
                     }
               })
            },
            seacherUser(){
                this.currentPage=1;
                this.initUserTable();
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initUserTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initUserTable();
            }
        }
    }
</script>

<style scoped>

</style>
